<template>
	<view class="content">
		<headerbox :cixitype="cixi"></headerbox>
		<view class="pages">
			<view class="card card-style">
				<view class="contentTow">

					<view class="">
						<view class="magBox">
							<view class="mihaoImg">
								<image src="/static/img/mihaojian.png" mode=""></image>
							</view>
							<input name="current_password" type="password" placeholder="" class="passwordBox"
								autocomplete="current_password" aria-invalid="true"
								aria-describedby="current_password-error" @blur="getInputBlur('1')"
								@focus="getInputFocus('1')" @input="getInput('1')" v-model="old_password"
								:class="{isInvalid:isInputOneNull}">
							<label class="color-theme" :class="{magBoxLabelTow:isInputOneNum}">当前登录密码</label>
							<view class="invalid-feedback" v-if="isInputOneNull">{{isInputOneNullText}}</view>
							<view class="form-custom">
								必填
							</view>
						</view>
					</view>
					<view class="">
						<view class="magBox">
							<view class="mihaoImg">
								<image src="/static/img/mihaojian.png" mode=""></image>
							</view>
							<input name="current_password" type="password"  placeholder="" class="passwordBox"
								autocomplete="current_password" aria-invalid="true" maxlength="6"
								aria-describedby="current_password-error" @blur="getInputBlur('2')"
								@focus="getInputFocus('2')" @input="getInput('2')" v-model="password"
								:class="{isInvalid:isInputTowNull}">
							<label class="color-theme" :class="{magBoxLabelTow:isInputTowNum}">请输入新支付密码
								(6个数字)</label>
							<view class="invalid-feedback" v-if="isInputTowNull">{{isInputTowNullText}}</view>
							<view class="form-custom">
								必填
							</view>
						</view>
					</view>
					<view class="">
						<view class="magBox">
							<view class="mihaoImg">
								<image src="/static/img/mihaojian.png" mode=""></image>
							</view>
							<input name="current_password" type="password"  placeholder="" class="passwordBox"
								autocomplete="current_password" aria-invalid="true" maxlength="6"
								aria-describedby="current_password-error" @blur="getInputBlur('3')"
								@focus="getInputFocus('3')" @input="getInput('3')" v-model="password_confirmation"
								:class="{isInvalid:isInputThreeNull}">
							<label class="color-theme" :class="{magBoxLabelTow:isInputThreeNum}">请确认新支付密码</label>
							<view class="invalid-feedback" v-if="isInputThreeNull">{{isInputThreeNullText}}</view>
							<view class="form-custom">
								必填
							</view>
						</view>
					</view>


					<button class="gengxinBut" @click="submit()">更新</button>
				</view>
			</view>
		</view>
		<view class="footer-bar" :class="cixi ? '':'footer-bar-detached'">
			<view class="fbitem" @click="goSwichPage('/pages/index/index')">
				<view class="image">
					<image src="../../static/timg/shouye.png" mode=""></image>
				</view>
				<view class="text">首页</view>
			</view>
			<view class="fbitem" @click="goSwichPage('/pages/contract/contract')">
				<view class="image">
					<image src="../../static/timg/heyue.png" mode=""></image>
				</view>
				<view class="text">合约</view>
			</view>
			<view class="fbitem" @click="goSwichPage('/pages/user/assets')">
				<view class="image">
					<image src="../../static/timg/zichan.png" mode=""></image>
				</view>
				<view class="text">资产</view>
			</view>
			<view class="fbitem" @click="goSwichPage('/pages/user/claim')">
				<view class="image">
					<image src="../../static/timg/suopei.png" mode=""></image>
				</view>
				<view class="text">索赔</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {reset_qk_password } from '../../api/api.js'
	import headerbox from '@/pages/header.vue'
	export default {
		components: {
			headerbox
		},
		data() {
			return {
				cixi: false,
				isInputOneNum: false,
				isInputOneNull: false,
				isInputTowNum: false,
				isInputTowNull: false,
				isInputThreeNum: false,
				isInputThreeNull: false,
				
				isInputOneNullText:'这是必填字段',
				isInputTowNullText:'这是必填字段',
				isInputThreeNullText:'这是必填字段',
				old_password:'',
				password:'',
				password_confirmation:'',
			}
		},
		onLoad() {

		},
		onPageScroll(e) {
			if (e.scrollTop > 0) {
				this.cixi = true
			} else {
				this.cixi = false
			}
		},
		methods: {
			// 失去
			getInputBlur(num) {
				if (num == 1) { //现有密码
					if (!this.old_password) {
						this.isInputOneNum = false;
					}
				}
				if (num == 2) { //新密码
					if (!this.password) {
						this.isInputTowNum = false;
					}
				}
				if (num == 3) { //新密码2
					if (!this.password_confirmation) {
						this.isInputThreeNum = false;
					}
				}
				console.log(this.password);
			},
			// 获取
			getInputFocus(num) {
				if (num == 1) { //现有密码
					this.isInputOneNum = true;
				}
				if (num == 2) { //新密码
					this.isInputTowNum = true;
				}
				if (num == 3) { //新密码2
					this.isInputThreeNum = true;
				}
				console.log(num);
			},
			getInput(num) {
				if (num == 1) { //现有密码
					if (!this.old_password) {
						this.isInputOneNullText='这是必填字段';
						this.isInputOneNull = true;
					}else{
						this.isInputOneNull = false;
					}
				}
				if (num == 2) { //新密码
					if (!this.password) {
						this.isInputTowNullText='这是必填字段';
						this.isInputTowNull = true;
					}else{
						this.isInputTowNull = false;
					}
				}
				if (num == 3) { //新密码2
					if (!this.password_confirmation) {
						this.isInputThreeNullText='这是必填字段';
						this.isInputThreeNull = true;
					}else{
						this.isInputThreeNull = false;
					}
				}
			},
			submit(){
				let that = this;
				this.isInputOneNull=false;
				this.isInputTowNull=false;
				this.isInputThreeNull=false;
				if(this.old_password == ''){
					this.isInputOneNull=true;
					this.isInputOneNullText='请输入密码'
					// uni.showToast({
					// 	title: '请输入密码',
					// 	icon:'error',
					// 	duration: 2000
					// });
					return false
				}
				if(this.password == ''){
					this.isInputTowNull=true;
					this.isInputTowNullText='请输入新密码'
					// uni.showToast({
					// 	title: '请输入新密码',
					// 	icon:'error',
					// 	duration: 2000
					// });
					return false
				}
				if(this.password_confirmation == ''){
					this.isInputThreeNull=true;
					this.isInputThreeNullText='请输入确认密码'
					// uni.showToast({
					// 	title: '请输入确认密码',
					// 	icon:'error',
					// 	duration: 2000
					// });
					return false
				}
				if(this.password_confirmation !=this.password){
					this.isInputTowNull=true;
					this.isInputTowNullText='两次密码不一致'
					this.isInputThreeNull=true;
					this.isInputThreeNullText='两次密码不一致'
					// uni.showToast({
					// 	title: '密码不一致',
					// 	icon:'error',
					// 	duration: 2000
					// });
					return false
				}
				let datas = {
					old_password:this.old_password,
					password:this.password,
					password_confirmation:this.password_confirmation
				}
				reset_qk_password(datas).then(res => {
					if(res.data.status.errorCode == 0){
						uni.showToast({
							title: res.data.status.msg,
							icon:'success',
							duration: 2000
						});
						console.log(that.forgotpsd)
						
					}else{
						uni.showToast({
							title: res.data.status.msg,
							icon:'error',
							duration: 2000
						});
					}
				}).catch(err => {
					console.log(err)
				})
			},
			goSwichPage(page) {
				uni.navigateTo({
					url: page
				})
			},
		}
	}
</script>
<style scoped>
	* {
		box-sizing: border-box;
	}

	.card {
		position: relative;
		display: flex;
		flex-direction: column;
		min-width: 0;
		word-wrap: break-word;
		background-color: #fff;
		background-clip: border-box;
		border: 1px solid rgba(0, 0, 0, 0.125);
		border-radius: 0.25rem;
	}

	.card-style {
		overflow: hidden;
		border-radius: 10px;
		margin: 0px 10px 15px 10px;
		border: none;
		box-shadow: rgb(0 0 0 / 30%) 0px 30px 60px -30px, rgb(10 37 64 / 35%) 0px -2px 6px 0px inset;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}

	.card-styleTow {
		overflow: visible !important;
		margin-top: 3rem !important;
	}

	.card-styleTow image {
		box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.18);
		border-radius: 50%;
		width: 150px;
		height: 150px;
		margin-top: -3rem;
		margin-right: auto;
		margin-left: auto;
		vertical-align: middle;
	}

	.contentTow {
		position: relative;
		margin: 20px 20px 20px 20px;
		text-align: center;
	}


	uni-button:after {
		border: 1px solid transparent !important;
	}

	.gengxinBut {
		cursor: pointer;
		font-size: 12px;
		padding: 12px 18px;
		font-family: "Nunito", sans-serif;
		box-shadow: 0 5px 14px 0 rgba(0, 0, 0, 0.1);
		transition: all 120ms ease;
		font-weight: 700;
		border-radius: 10px;
		background-color: #4A89DC;
		color: #FFF;
		margin-top: 1.5rem;
		line-height: 1.5;
		text-align: center;
		text-decoration: none;
		vertical-align: middle;
		user-select: none;
		border: 1px solid transparent !important;
	}

	.magBox {
		margin-bottom: 1rem;
		position: relative;
	}

	.mihaoImg {
		position: absolute;
		height: 53px;
		width: 40px;
		line-height: 53px;
		text-align: center;
	}

	.mihaoImg image {
		width: 15px;
		height: 15px;
	}

	.passwordBox {
		border: solid 1px rgba(0, 0, 0, 0.07);
		padding-top: 15px;
		padding-left: 45px;
		height: 53px;
		/* padding: 13px 15px 0px 15px !important; */
		border-radius: 10px;
		display: block;
		width: 100%;
		text-align: left;
		font-weight: 400;
		color: #212529;
		background-color: #fff;
		background-clip: padding-box;
		appearance: none;
		transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	}


	.isInvalid {
		border-color: rgba(213, 25, 77, 0.3) !important;
		background-image: url('/static/img/jinggao.png');
		background-repeat: no-repeat;
		background-position: right calc(0.375em + 0.1875rem) center;
		background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
	}

	.invalid-feedback {
		text-align: left;
		width: 100%;
		margin-top: 0.25rem;
		font-size: 0.875em;
		color: #dc3545;
	}



	.magBox>label {
		position: absolute;
		top: 0;
		left: 30px;
		line-height: 53px;
		padding: 0px 15px 0px 15px;
		font-size: 14px;
		height: 100%;
		color: #0f1117;
		pointer-events: none;
		border: 1px solid transparent;
		transform-origin: 0 0;
		transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
		display: inline-block;
	}

	.magBoxLabelTow {
		opacity: 0.65;
		transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
	}

	.form-custom {
		position: absolute;
		top: 0px;
		right: 10px;
		height: 53px;
		line-height: 53px;
		pointer-events: none;
		font-size: 9px;
		opacity: 0.5;
	}
</style>
<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}

	.content {
		width: 100%;
		min-height: 100vh;
		background-color: #f1f1f7;
		color: #747474 !important;
	}

	.pages {
		padding-top: calc(calc(110rpx + 60rpx) + env(safe-area-inset-top));
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
	}

	.footer-bar {
		background-color: rgba(255, 255, 255, 0.95);
		padding: 0px 20rpx;
		position: fixed;
		bottom: 0px;
		left: 0px;
		right: 0px;
		z-index: 98;
		backdrop-filter: blur(20rpx);
		display: flex;
		text-align: center;
		transition: all 250ms ease;
		height: calc(120rpx + env(safe-area-inset-bottom));
		box-shadow: 0 -10rpx 10rpx 0 rgba(0, 0, 0, 0.04);
	}

	.footer-bar.footer-bar-detached {
		border-radius: 40rpx;
		left: 20rpx !important;
		right: 20rpx !important;
		bottom: 30rpx !important;
		box-shadow: 0 0px 30rpx 0 rgba(0, 0, 0, 0.1) !important;
		height: 120rpx !important;
	}

	.fbitem {
		color: #818181;
		position: relative;
		flex: 1 1 auto;
		padding-top: 24rpx;

		.image {
			height: 48rpx;
			margin-top: -4rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.text {
			height: 48rpx;
			margin-top: -6rpx;
			font-size: 24rpx;
			opacity: 0.7;
			color: #818181;
		}
	}
</style>